<template>
  <view class="identity-container">
    <view class="identity-status card">
      <text class="page-title">身份认证</text>
      <view class="status-info">
        <u-tag :text="statusText" :type="statusType" size="large"></u-tag>
        <text class="status-desc">{{ statusDesc }}</text>
      </view>
    </view>
    
    <view class="upload-section card" v-if="canUpload">
      <view class="section-title">上传身份证件</view>
      
      <view class="upload-item">
        <text class="upload-label">身份证正面</text>
        <view class="upload-area" @click="chooseImage('idFront')">
          <image v-if="form.idFrontPath" :src="form.idFrontPath" mode="aspectFit"></image>
          <view v-else class="upload-placeholder">
            <u-icon name="plus" size="40" color="#999"></u-icon>
            <text>点击上传</text>
          </view>
        </view>
      </view>
      
      <view class="upload-item">
        <text class="upload-label">身份证背面</text>
        <view class="upload-area" @click="chooseImage('idBack')">
          <image v-if="form.idBackPath" :src="form.idBackPath" mode="aspectFit"></image>
          <view v-else class="upload-placeholder">
            <u-icon name="plus" size="40" color="#999"></u-icon>
            <text>点击上传</text>
          </view>
        </view>
      </view>
      
      <view class="upload-item">
        <text class="upload-label">手持身份证</text>
        <view class="upload-area" @click="chooseImage('selfie')">
          <image v-if="form.selfiePath" :src="form.selfiePath" mode="aspectFit"></image>
          <view v-else class="upload-placeholder">
            <u-icon name="plus" size="40" color="#999"></u-icon>
            <text>点击上传</text>
          </view>
        </view>
      </view>
      
      <u-button 
        type="primary" 
        :loading="loading"
        @click="submitIdentity"
        :custom-style="{ borderRadius: '50rpx', height: '80rpx', marginTop: '40rpx' }"
      >
        提交认证
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'NOT_SUBMITTED', // NOT_SUBMITTED, PENDING, APPROVED, REJECTED
      form: {
        idFrontPath: '',
        idBackPath: '',
        selfiePath: ''
      },
      loading: false
    }
  },
  
  computed: {
    statusText() {
      const textMap = {
        'NOT_SUBMITTED': '未提交',
        'PENDING': '审核中',
        'APPROVED': '已认证',
        'REJECTED': '审核失败'
      }
      return textMap[this.status] || '未知'
    },
    
    statusType() {
      const typeMap = {
        'NOT_SUBMITTED': 'info',
        'PENDING': 'warning',
        'APPROVED': 'success',
        'REJECTED': 'error'
      }
      return typeMap[this.status] || 'info'
    },
    
    statusDesc() {
      const descMap = {
        'NOT_SUBMITTED': '请上传身份证件完成认证',
        'PENDING': '您的身份认证正在审核中，请耐心等待',
        'APPROVED': '恭喜您，身份认证已通过',
        'REJECTED': '很抱歉，您的身份认证未通过，请重新提交'
      }
      return descMap[this.status] || ''
    },
    
    canUpload() {
      return this.status === 'NOT_SUBMITTED' || this.status === 'REJECTED'
    }
  },
  
  methods: {
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempPath = res.tempFilePaths[0]
          
          switch(type) {
            case 'idFront':
              this.form.idFrontPath = tempPath
              break
            case 'idBack':
              this.form.idBackPath = tempPath
              break
            case 'selfie':
              this.form.selfiePath = tempPath
              break
          }
        }
      })
    },
    
    async submitIdentity() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      
      try {
        // 这里调用API提交身份认证
        // await submitIdentity(this.form)
        
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        this.status = 'PENDING'
        
      } catch (error) {
        console.error('提交身份认证失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    validateForm() {
      if (!this.form.idFrontPath) {
        uni.showToast({ title: '请上传身份证正面', icon: 'none' })
        return false
      }
      if (!this.form.idBackPath) {
        uni.showToast({ title: '请上传身份证背面', icon: 'none' })
        return false
      }
      if (!this.form.selfiePath) {
        uni.showToast({ title: '请上传手持身份证照片', icon: 'none' })
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.identity-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.identity-status,
.upload-section {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  
  .page-title,
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.status-info {
  text-align: center;
  
  .status-desc {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-top: 20rpx;
  }
}

.upload-item {
  margin-bottom: 30rpx;
  
  .upload-label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .upload-area {
    width: 100%;
    height: 200rpx;
    border: 2rpx dashed #ddd;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
    
    .upload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      
      text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
}
</style> 